<template>
  <div id="applylist">
    <headerTitle status="show" text="申请记录"></headerTitle>
    <ul class="pageTab">
      <li @click="act='stay',sta='1'" :class="{act:act=='stay'}">已申请</li>
      <li @click="act='already',sta='2'" :class="{act:act=='already'}">审核中</li>
      <li @click="act='Evaluated',sta='3'" class="order-nav-none-border" :class="{act:act=='Evaluated'}">未通过</li>
    </ul>
    <div class="split20"></div>
    <section class="pageList" v-show="act=='stay'">
      <ul>
        <li>2017年3月20日，家中有事</li>
        <li>2017年3月20日，家中有事</li>
        <li>2017年3月20日，家中有事</li>
      </ul>
    </section>

    <section class="pageList" v-show="act=='already'">

    </section>

    <section class="pageList" v-show="act=='Evaluated'">

    </section>

    <div v-show="dishide" class="pageNone">
        <img src="../../assets/img/none_bg.png" alt="">
      </div>
  </div>
</template>

<script>
  import headerTitle from '../commons/header.vue'
  export default {
    name: 'applylist',
    data () {
      return {
        msg: 'applylist',
        act: 'stay',
        sta:'1',
        dishide:false
      }
    },
    methods:{//方法
      initdatalist(){
        
      }
    },
    computed:{//计算  引入vuex里的state数据

    },
    mounted(){//组件加载完执行
      this.initdatalist()
    },
    watch:{//监听数据，某数据改变时触发事件
      sta:function(val,oldval){
        if(val == '1'){
          this.dishide = false
        }else if(val == '2' || val == '3'){
          this.dishide = true
        }
      }
    },
    components:{//引入组件
      headerTitle
    },
    destroyed(){//离开组件

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
